import React from 'react';
import PropTypes from 'prop-types';
import { Table, Modal, Pagination, Button } from 'antd';
import { Link } from 'dva/router';
import queryString from 'query-string';
// import styles from './List.css';

// const confirm = Modal.confirm;

const List = ({ onDeleteItem, onEditItem, location, ...tableProps }) => {
    location.query = queryString.parse(location.search);

    const handleMenuClick = (record, e) => {
        console.log(record);
        console.log(e);
        // if (e.key === '1') {
        //     onEditItem(record)
        // } else if (e.key === '2') {
        //     confirm({
        //         title: 'Are you sure delete this record?',
        //         onOk () {
        //             onDeleteItem(record.id)
        //         },
        //     })
        // }
    };

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <Link to={'users/detail'}>{text}</Link>,
        }, {
            title: 'NickName',
            dataIndex: 'nickName',
            key: 'nickName'
        }, {
            title: 'Age',
            dataIndex: 'age',
            key: 'age'
        }, {
            title: 'Email',
            dataIndex: 'email',
            key: 'email'
        }, {
            title: 'Phone',
            dataIndex: 'phone',
            key: 'phone'
        }, {
            title: 'Address',
            dataIndex: 'address',
            key: 'address'
        }, {
            title: 'Operation',
            key: 'operation',
            width: 100,
            render: (text, record) => {
                return (
                    <span>
                        <Button type="primary" size="small" icon="cloud" onClick={()=>handleMenuClick}>Edit</Button>
                        <Button type="primary" size="small" icon="cloud" onClick={()=>handleMenuClick}>Delete</Button>
                    </span>
                )
            },
        },
    ];

    return (
        <div>
            <Table
                {...tableProps}
                bordered
                scroll={{ x: 1250 }}
                columns={columns}
                simple
                rowKey={record => record.id}
            />
            <Pagination
                className="ant-table-pagination"
                total={tableProps.pagination.total}
                current={tableProps.pagination.current}
                pageSize={10}
            />
        </div>
    )
};

List.propTypes = {
    onDeleteItem: PropTypes.func,
    onEditItem: PropTypes.func,
    location: PropTypes.object,
};

export default List;
